<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22.函数式组件使用props</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app1"></div>
    <div id="app2"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持 react 操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入 prop-types，用于对于组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">

        // class Boy extends React.Component {
        //     // 编写构造器
        //     constructor(props) {
        //         super(props)
        //         console.log(props)
        //     }

        //     // 对标签属性进行类型、必要性限制
        //     static propTypes = {
        //         // name: React.PropTypes.string
        //         name: PropTypes.string.isRequired,  // 限制name必传且为字符串
        //         sex: PropTypes.string,   // 限制性别为字符串
        //         age: PropTypes.number,   // 限制年龄为数字
        //         speak: PropTypes.func    // 限制 speak 为方法
        //     }
        //     // 对标签属性默认值设置
        //     static defaultProps = {
        //         sex: '男',  // sex 不传入，则设置默认值为 未知
        //         age: 4  // age 不传入，则设置默认值为 0
        //     }

        //     render() {
        //         // 首先注意，props是只读的，不允许任何的修改操作！！
        //         let { name, age, sex } = this.props
        //         // this.props.name = '王俊宇' // 此行代码报错，因为只读，不能修改，改不了
        //         return (
        //             <ul>
        //                 <li>姓名：{name}</li>
        //                 <li>性别：{sex}</li>
        //                 <li>年龄：{age}</li>
        //             </ul>
        //         )
        //     }
        // }


        function Boy(props) {
            console.log(props)
            let { name, age, sex } = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }

        // 对标签属性进行类型、必要性限制
        Boy.propTypes = {
            // name: React.PropTypes.string
            name: PropTypes.string.isRequired,  // 限制name必传且为字符串
            sex: PropTypes.string,   // 限制性别为字符串
            age: PropTypes.number,   // 限制年龄为数字
            speak: PropTypes.func    // 限制 speak 为方法
        }
        // 对标签属性默认值设置
        Boy.defaultProps = {
            sex: '未知',  // sex 不传入，则设置默认值为 未知
            age: 0  // age 不传入，则设置默认值为 0
        }


        ReactDOM.render(<Boy name="我是ed." />, document.getElementById('app1'))


        /**
         * 通常情况下，React 中，构造函数仅用于一下两种情况：
         *  通过给 this.state 赋值对象来初始化内部 state
         *  为时间处理函数绑定实例
         * 
         * 在 React 组件挂载之前，回调用他的构造函数，在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super(props)。
         * 否则， this.props 在构造函数中可能出现没定义的 bug。
        */

    </script>

</body>

</html>